<template>
  <div class="at_popup" :style="{ top: `${top}px`, left: `${left}px` }">
    <div class="at_popup_hint">请选择或输入你想@的人</div>
    <div class="at_popup_list" ref="scrollList">
      <div class="at_popup_group">
        <div class="at_popup_group_name">我的关注</div>
        <div class="at_popup_group_list">
          <div
            class="at_popup_user"
            :class="
              selectItem && selectItem.uid == item.uid
                ? 'at_popup_user__selected'
                : ''
            "
            v-for="(item, index) in searchList"
            :key="item.uid"
            @mouseenter="userSelect(item, index)"
            @mousedown="getUserSelect(item)"
          >
            <div class="at_popup_user_avatar">
              <img :src="item.avatar" />
            </div>
            <div class="at_popup_user_info">
              <div
                class="at_popup_user_name"
                v-html="item.replaceName || item.uname"
              ></div>
              <div class="at_popup_user_fans">{{ item.ufans }}粉丝</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchList: [
        {
          avatar: "/static/video/atup_avatar0.webp",
          uname: "榄橄最后防线w",
          uid: "301401873",
          ufans: 5,
        },
        {
          avatar: "/static/video/atup_avatar1.webp",
          uname: "贝噶王",
          uid: "168296928",
          ufans: 52,
        },
        {
          avatar: "/static/video/atup_avatar2.webp",
          uname: "大街上▍逃竄的o_熊貓",
          uid: "513930",
          ufans: 88,
        },
        {
          avatar: "/static/video/atup_avatar3.webp",
          uname: "yoo一凡",
          uid: "2227911",
          ufans: 23,
        },
        {
          avatar: "/static/video/atup_avatar0.webp",
          uname: "榄橄最后防线w",
          uid: "30140187q",
          ufans: 5,
        },
        {
          avatar: "/static/video/atup_avatar1.webp",
          uname: "贝噶王",
          uid: "16829692q",
          ufans: 52,
        },
        {
          avatar: "/static/video/atup_avatar2.webp",
          uname: "大街上▍逃竄的o_熊貓",
          uid: "51393q",
          ufans: 88,
        },
        {
          avatar: "/static/video/atup_avatar3.webp",
          uname: "yoo一凡",
          uid: "222791q",
          ufans: 23,
        },
      ],
      selectItem: null,
      currentIndex: 0,
      scrollIndex: 0, //记录当前选中位于可视滚动位置
      $scrollList: null,
    };
  },
  props: {
    left: {
      typeof: Number,
      required: true,
    },
    top: {
      typeof: Number,
      required: true,
    },
  },
  mounted() {
    document.documentElement.addEventListener("keydown", this.keydown);
    this.$bus.$on("getAtContent", (data) => {
      // 发送请求
      // this.currentIndex = 0
      // console.log(data)
      let replaceStr = `<font style="color: #00a1d6">${data}</font>`;
      this.selectItem = this.searchList[this.currentIndex];
      this.searchList.forEach((item) => {
        if (data && item.uname.indexOf(data) > -1) {
          let result = item.uname.replace(data, replaceStr);
          this.$set(item, "replaceName", result);
        } else {
          this.$set(item, "replaceName", item.uname);
        }
      });
    });
    this.$scrollList = this.$refs.scrollList;
  },
  beforeDestroy() {
    this.$bus.$off("getAtContent");
    document.documentElement.removeEventListener("keydown", this.keydown);
  },
  methods: {
    userSelect(item, index) {
      this.$set(this, "currentIndex", index);
      this.$set(this, "selectItem", item);
      // 需要重新计算鼠标移入选择后的scrollIndex
    },
    getUserSelect(item) {
      this.$bus.$emit("getUserSelect", item);
    },
    keydown(event) {
      if (event.key == "ArrowUp") {
        this.currentIndex--;
        this.scrollIndex--;
        if (this.scrollIndex < 0) {
          this.scrollIndex = 0;
        }
        if (this.currentIndex < 0) {
          this.currentIndex = this.searchList.length - 1;
          this.scrollIndex = 6;
        }
        this.selectItem = this.searchList[this.currentIndex];
      } else if (event.key == "ArrowDown") {
        this.currentIndex++;
        this.scrollIndex++;
        if (this.scrollIndex > 6) {
          this.scrollIndex = 6;
        }
        if (this.currentIndex > this.searchList.length - 1) {
          this.currentIndex = 0;
          this.scrollIndex = 0;
          this.$scrollList.scrollTop = 0;
        }
        this.selectItem = this.searchList[this.currentIndex];
      } else if (event.key == "Enter") {
        this.getUserSelect(this.selectItem);
      } else {
        return false;
      }
      if (this.scrollIndex == 0 || this.scrollIndex == 6) {
        if (this.currentIndex >= 6) {
          this.$scrollList.scrollTop = (this.currentIndex - 6) * 50 + 17;
        } else {
          this.$scrollList.scrollTop = this.currentIndex * 50 + 17;
        }
      }
      // console.log(this.scrollIndex, this.currentIndex);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  list-style: none;
  padding: 0;
  margin: 0;
}
.at_popup {
  width: 246px;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.17);
  border: 1px solid #e5e9ef;
  border-radius: 4px;
  background-color: #fff;
  font-size: 12px;
  position: absolute;
  z-index: 10;
  .at_popup_hint {
    height: 40px;
    line-height: 42px;
    color: #99a2aa;
    letter-spacing: 0;
    padding-left: 12px;
    font-family: "Microsoft YaHei", "Microsoft Sans Serif", "Microsoft SanSerf";
  }
  .at_popup_list {
    width: 100%;
    max-height: 353px;
    overflow: auto;
    .at_popup_group {
      .at_popup_group_name {
        line-height: 17px;
        color: #505050;
        padding-left: 12px;
        padding-bottom: 3px;
      }
      .at_popup_group_list {
        .at_popup_user {
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 50px;
          padding-left: 12px;
          cursor: pointer;
          .at_popup_user_avatar {
            position: relative;
            height: 36px;
            width: 36px;
            flex-shrink: 0;
            img {
              width: 36px;
              height: 36px;
              position: absolute;
              border-radius: 50%;
            }
          }
          .at_popup_user_info {
            padding-left: 8px;
            flex-grow: 1;
            .at_popup_user_name {
              color: #282828;
              line-height: 16px;
              letter-spacing: 0;
            }
            .at_popup_user_fans {
              margin-top: 3px;
              line-height: 16px;
              color: #99a2aa;
              letter-spacing: 0;
            }
          }
        }
        .at_popup_user__selected {
          background-color: #f4f5f7;
        }
      }
    }
  }
}
</style>